<template>
  <div class="line-bottom-box">
    <div class="header">
      <div class="title">树状折线图</div>
      <div class="tool" @click="goToWaterBallPage">
        {{ $store.state.fullScreenStatus["lineBottom"] ? "返回主页" : "全屏" }}
      </div>
    </div>
    <div class="line-bottom" ref="line-bottom">我是水球图</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-11-15 09:39:24
 *@Description: 模块描述
 */
import { mapMutations } from "vuex"
export default {
  name: "",
  data() {
    return {
      myCharts: null,
    }
  },
  created() {},
  mounted() {
    this.initEcharts()
    window.addEventListener("resize", this.screenUpdate)
  },
  destroyed() {
    this.myCharts.dispose()
    this.myCharts = null
    window.removeEventListener("resize", this.screenUpdate())
  },
  methods: {
    ...mapMutations([
      //使用es6的拓展运算符
      "changeFullScreenStatus",
    ]),
    // 初始化图表
    initEcharts() {
      const lineChart = document.querySelector(".line-bottom")
      this.myCharts = this.$echarts.init(lineChart)
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        // backgroundColor: "#0c2d55",
        tooltip: {
          trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "cross", // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
          },
          // formatter: function (params) {
          //     //params[0].marker,marker参数为提示语前面的小圆点
          //     return params[0].name +
          //         "<br>" + params[0].marker + "货量" + params[0].value + '吨' +
          //         "<br>" + params[4].marker + "进港装载率" + params[4].value + '%' +
          //         "<br>" + params[5].marker + "出港装载率" + params[5].value + '%'
          // }
        },
        grid: {
          top: "30%",
          left: "2%",
          right: "2%",
          bottom: "2%", //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: this.$fitChartFont(16),
          },
          itemGap: this.$fitChartFont(40),
          itemWidth: this.$fitChartFont(18),
          itemHeight: this.$fitChartFont(5),
          data: ["进口业务", "出口业务"],
          right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
          top: `${this.$fitChartFont(5)}px`,
        },
        animation: true,

        xAxis: [
          {
            type: "category",
            data: [
              "2021年1月",
              "2021年2月",
              "2021年3月",
              "2021年4月",
              "2021年5月",
              "2021年6月",
            ],
            axisLine: {
              show: true,
              onZero: true,
              symbol: "none",
              lineStyle: {
                color: "#264981",
              },
            },
            boundaryGap: true,
            axisLabel: {
              textStyle: {
                color: "rgba(233, 240, 255, 1)",
                fontWeight: this.$fitChartFont(500),
                fontSize: `${this.$fitChartFont(16)}`,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: [
              "2021年1月",
              "2021年2月",
              "2021年3月",
              "2021年4月",
              "2021年5月",
              "2021年6月",
            ],
            axisLine: {
              show: false,
              onZero: true,
              symbol: "none",
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            boundaryGap: false,
            axisLabel: {
              show: false,
              textStyle: {
                color: "rgba(233, 240, 255, 1)",
                fontWeight: this.$fitChartFont(500),
                fontSize: `${this.$fitChartFont(16)}`,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "货值",
            nameTextStyle: {
              color: "rgb(233,240,255)",
              fontSize: this.$fitChartFont(22),
              padding: this.$fitChartFont(10),
            },
            min: 0, //最小
            max: this.$fitChartFont(250), //最大
            interval: this.$fitChartFont(50), //相差
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(21,93,174)",
              },
            },
            axisTick: {
              show: false,
              inside: true,
              length: this.$fitChartFont(7),
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(195, 213, 248, 1)",
                fontSize: this.$fitChartFont(22),
              },
            },
          },
          {
            name: "单量",
            nameTextStyle: {
              color: "rgb(233,240,255)",
              fontSize: this.$fitChartFont(22),
              padding: this.$fitChartFont(10),
            },
            min: 0, //最小
            max: this.$fitChartFont(25), //最大
            interval: this.$fitChartFont(5), //相差
            type: "value",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(195, 213, 248, 1)",
                fontSize: this.$fitChartFont(22),
              },
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            data: [180, 160, 155, 158, 130, 151],
            type: "bar",
            name: "进口业务",
            yAxisIndex: 0,
            xAxisIndex: 0,
            //坐标轴显示器的文本标签
            label: {
              show: false,
            },
            barGap: "120%",
            barWidth: this.$fitChartFont(10),
            //柱条颜色
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1DFFFB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#287CE7", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            animationEasing: "linear",
            animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
            animationDurationUpdate: 300, //数据更新动画的时长
            animation: true, //开启动画
            animationDuration: 0,
            z: 1,
          },
          {
            data: [180, 160, 155, 158, 130, 151],
            type: "bar",
            name: "出口业务",
            yAxisIndex: 1,
            xAxisIndex: 0,
            //坐标轴显示器的文本标签
            label: {
              show: false,
            },
            barGap: "120%",
            barWidth: this.$fitChartFont(10),
            //柱条颜色
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,240,191,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(202,121,65,1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            animationEasing: "linear",
            animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
            animationDurationUpdate: 300, //数据更新动画的时长
            animation: true, //开启动画
            animationDuration: 0,
            z: 1,
          },
          {
            // 值分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            yAxisIndex: 0,
            xAxisIndex: 0,
            symbolRepeat: "fixed",
            symbolMargin: this.$fitChartFont(3),
            symbol: "rect",
            symbolClip: true,
            symbolSize: [this.$fitChartFont(10), this.$fitChartFont(3)],
            symbolPosition: "start",
            symbolOffset: [-11, -1],
            // symbolBoundingData: this.total,
            data: [180, 160, 155, 158, 130, 151],
            width: this.$fitChartFont(25),
            z: 0,
            zlevel: 3,
          },
          {
            // 值分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            yAxisIndex: 1,
            xAxisIndex: 0,
            symbolRepeat: "fixed",
            symbolMargin: this.$fitChartFont(3),
            symbol: "rect",
            symbolClip: true,
            symbolSize: [this.$fitChartFont(10), this.$fitChartFont(3)],
            symbolPosition: "start",
            symbolOffset: [11, -1],
            // symbolBoundingData: this.total,
            data: [180, 160, 155, 158, 130, 151],
            width: this.$fitChartFont(25),
            z: 0,
            zlevel: 3,
          },
          {
            name: "进口业务",
            type: "line",
            showAllSymbol: true, //显示所有图形。
            yAxisIndex: 1,
            xAxisIndex: 1,
            symbol: "none", //标记的图形为实心圆
            symbolSize: this.$fitChartFont(6), //标记的大小
            z: 150,
            zlevel: 25,
            itemStyle: {
              color: "rgba(0, 0, 0, 1)",
              borderWidth: "2",
              borderColor: "rgba(142, 76, 184, 1)",
            },
            lineStyle: {
              color: "#287CE8",
            },
            smooth: true,
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    // color: 'rgba(65, 197, 95, 0.4)',
                    color: "rgba(142, 76, 184, 0.4)",
                  },
                  {
                    offset: 0.6,
                    // color: 'rgba(65, 197, 95, 0.4)',
                    color: "rgba(142, 76, 184, 0.2)",
                  },
                  {
                    offset: 1,
                    // color: 'rgba(255,255,255, 0)',
                    color: "rgba(142, 76, 184, 0)",
                  },
                ],
                false
              ),
            },
            data: [21, 24, 8, 22, 16, 19],
          },
          {
            name: "出口业务",
            type: "line",
            showAllSymbol: true, //显示所有图形。
            yAxisIndex: 1,
            xAxisIndex: 1,
            symbol: "none", //标记的图形为实心圆
            symbolSize: this.$fitChartFont(6), //标记的大小
            z: 150,
            zlevel: 25,
            itemStyle: {
              color: "#333", //拐点颜色
              // borderColor: '#fff600',//拐点边框颜色
              // color: 'rgba(0, 0, 0, 1)',
              borderWidth: this.$fitChartFont(2),
              borderColor: "rgba(27,204,102)",
            },
            lineStyle: {
              color: "#F2C347",
            },
            smooth: true,
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(27,204,102,0.4)",
                    // color: 'rgba(137,32,200, 0.4)',
                  },
                  {
                    offset: 0.6,
                    color: "rgba(27,204,102,0.2)",
                    // color: 'rgba(137,32,200, 0.4)',
                  },
                  {
                    offset: 1,
                    // color: 'rgba(137,32,200, 0)',
                    color: "rgba(27,204,102,0)",
                  },
                ],
                false
              ),
            },
            data: [23, 20, 18, 12, 16, 17],
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
      }
    },
    // 图表socket数据更新
    updateData() {
      // const option = {
      // }
      // this.myCharts.setOption(option)
      // this.myCharts.resize()
    },
    // 视口大小改变时，图表渲染
    screenUpdate() {
      // 准备待返回的配置项，把准备好的 legendData、series 传入。
      let option = {
        // backgroundColor: "#0c2d55",
        tooltip: {
          trigger: "axis", //触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "cross", // 默认为直线，可选为：'line' | 'shadow' | 'cross' , shadow表示阴影，cross为十字准星
          },
          // formatter: function (params) {
          //     //params[0].marker,marker参数为提示语前面的小圆点
          //     return params[0].name +
          //         "<br>" + params[0].marker + "货量" + params[0].value + '吨' +
          //         "<br>" + params[4].marker + "进港装载率" + params[4].value + '%' +
          //         "<br>" + params[5].marker + "出港装载率" + params[5].value + '%'
          // }
        },
        grid: {
          top: "30%",
          left: "2%",
          right: "2%",
          bottom: "2%", //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
        },
        legend: {
          textStyle: {
            color: "#fff",
            fontSize: this.$fitChartFont(16),
          },
          itemGap: this.$fitChartFont(40),
          itemWidth: this.$fitChartFont(18),
          itemHeight: this.$fitChartFont(5),
          data: ["进口业务", "出口业务"],
          right: "center", //组件离容器左侧的距离，可以是left,center,right，也可以是像素px和百分比10%
          top: `${this.$fitChartFont(5)}px`,
        },
        animation: true,

        xAxis: [
          {
            type: "category",
            data: [
              "2021年1月",
              "2021年2月",
              "2021年3月",
              "2021年4月",
              "2021年5月",
              "2021年6月",
            ],
            axisLine: {
              show: true,
              onZero: true,
              symbol: "none",
              lineStyle: {
                color: "#264981",
              },
            },
            boundaryGap: true,
            axisLabel: {
              textStyle: {
                color: "rgba(233, 240, 255, 1)",
                fontWeight: this.$fitChartFont(500),
                fontSize: `${this.$fitChartFont(16)}`,
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            type: "category",
            data: [
              "2021年1月",
              "2021年2月",
              "2021年3月",
              "2021年4月",
              "2021年5月",
              "2021年6月",
            ],
            axisLine: {
              show: false,
              onZero: true,
              symbol: "none",
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            boundaryGap: false,
            axisLabel: {
              show: false,
              textStyle: {
                color: "rgba(233, 240, 255, 1)",
                fontWeight: this.$fitChartFont(500),
                fontSize: `${this.$fitChartFont(16)}`,
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            name: "货值",
            nameTextStyle: {
              color: "rgb(233,240,255)",
              fontSize: this.$fitChartFont(22),
              padding: this.$fitChartFont(10),
            },
            min: 0, //最小
            max: this.$fitChartFont(250), //最大
            interval: this.$fitChartFont(50), //相差
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(21,93,174)",
              },
            },
            axisTick: {
              show: false,
              inside: true,
              length: this.$fitChartFont(7),
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(195, 213, 248, 1)",
                fontSize: this.$fitChartFont(22),
              },
            },
          },
          {
            name: "单量",
            nameTextStyle: {
              color: "rgb(233,240,255)",
              fontSize: this.$fitChartFont(22),
              padding: this.$fitChartFont(10),
            },
            min: 0, //最小
            max: this.$fitChartFont(25), //最大
            interval: this.$fitChartFont(5), //相差
            type: "value",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(21,93,174)",
              },
            },
            //坐标值标注
            axisLabel: {
              show: true,
              textStyle: {
                color: "rgba(195, 213, 248, 1)",
                fontSize: this.$fitChartFont(22),
              },
              formatter: "{value} ",
            },
          },
        ],
        series: [
          {
            data: [180, 160, 155, 158, 130, 151],
            type: "bar",
            name: "进口业务",
            yAxisIndex: 0,
            xAxisIndex: 0,
            //坐标轴显示器的文本标签
            label: {
              show: false,
            },
            barGap: "120%",
            barWidth: this.$fitChartFont(10),
            //柱条颜色
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#1DFFFB", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#287CE7", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            animationEasing: "linear",
            animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
            animationDurationUpdate: 300, //数据更新动画的时长
            animation: true, //开启动画
            animationDuration: 0,
            z: 1,
          },
          {
            data: [180, 160, 155, 158, 130, 151],
            type: "bar",
            name: "出口业务",
            yAxisIndex: 1,
            xAxisIndex: 0,
            //坐标轴显示器的文本标签
            label: {
              show: false,
            },
            barGap: "120%",
            barWidth: this.$fitChartFont(10),
            //柱条颜色
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,240,191,1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(202,121,65,1)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            animationEasing: "linear",
            animationEasingUpdate: "quadraticIn", //数据更新时的缓动效果
            animationDurationUpdate: 300, //数据更新动画的时长
            animation: true, //开启动画
            animationDuration: 0,
            z: 1,
          },
          {
            // 值分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            yAxisIndex: 0,
            xAxisIndex: 0,
            symbolRepeat: "fixed",
            symbolMargin: this.$fitChartFont(3),
            symbol: "rect",
            symbolClip: true,
            symbolSize: [this.$fitChartFont(10), this.$fitChartFont(3)],
            symbolPosition: "start",
            symbolOffset: [-11, -1],
            // symbolBoundingData: this.total,
            data: [180, 160, 155, 158, 130, 151],
            width: this.$fitChartFont(25),
            z: 0,
            zlevel: 3,
          },
          {
            // 值分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            yAxisIndex: 1,
            xAxisIndex: 0,
            symbolRepeat: "fixed",
            symbolMargin: this.$fitChartFont(3),
            symbol: "rect",
            symbolClip: true,
            symbolSize: [this.$fitChartFont(10), this.$fitChartFont(3)],
            symbolPosition: "start",
            symbolOffset: [11, -1],
            // symbolBoundingData: this.total,
            data: [180, 160, 155, 158, 130, 151],
            width: this.$fitChartFont(25),
            z: 0,
            zlevel: 3,
          },
          {
            name: "进口业务",
            type: "line",
            showAllSymbol: true, //显示所有图形。
            yAxisIndex: 1,
            xAxisIndex: 1,
            symbol: "none", //标记的图形为实心圆
            symbolSize: this.$fitChartFont(6), //标记的大小
            z: 150,
            zlevel: 25,
            itemStyle: {
              color: "rgba(0, 0, 0, 1)",
              borderWidth: "2",
              borderColor: "rgba(142, 76, 184, 1)",
            },
            lineStyle: {
              color: "#287CE8",
            },
            smooth: true,
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    // color: 'rgba(65, 197, 95, 0.4)',
                    color: "rgba(142, 76, 184, 0.4)",
                  },
                  {
                    offset: 0.6,
                    // color: 'rgba(65, 197, 95, 0.4)',
                    color: "rgba(142, 76, 184, 0.2)",
                  },
                  {
                    offset: 1,
                    // color: 'rgba(255,255,255, 0)',
                    color: "rgba(142, 76, 184, 0)",
                  },
                ],
                false
              ),
            },
            data: [21, 24, 8, 22, 16, 19],
          },
          {
            name: "出口业务",
            type: "line",
            showAllSymbol: true, //显示所有图形。
            yAxisIndex: 1,
            xAxisIndex: 1,
            symbol: "none", //标记的图形为实心圆
            symbolSize: this.$fitChartFont(6), //标记的大小
            z: 150,
            zlevel: 25,
            itemStyle: {
              color: "#333", //拐点颜色
              // borderColor: '#fff600',//拐点边框颜色
              // color: 'rgba(0, 0, 0, 1)',
              borderWidth: this.$fitChartFont(2),
              borderColor: "rgba(27,204,102)",
            },
            lineStyle: {
              color: "#F2C347",
            },
            smooth: true,
            areaStyle: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(27,204,102,0.4)",
                    // color: 'rgba(137,32,200, 0.4)',
                  },
                  {
                    offset: 0.6,
                    color: "rgba(27,204,102,0.2)",
                    // color: 'rgba(137,32,200, 0.4)',
                  },
                  {
                    offset: 1,
                    // color: 'rgba(137,32,200, 0)',
                    color: "rgba(27,204,102,0)",
                  },
                ],
                false
              ),
            },
            data: [23, 20, 18, 12, 16, 17],
          },
        ],
      }
      if (this.myCharts) {
        this.myCharts.setOption(option)
        this.myCharts.resize()
      }
    },
    goToWaterBallPage() {
      if (!this.$store.state.fullScreenStatus.lineBottom) {
        this.$router.push("/lineBottomPage")
        this.changeFullScreenStatus({ type: "lineBottom", value: true })
      } else {
        this.$router.back(1)
        this.changeFullScreenStatus({ type: "lineBottom", value: false })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.line-bottom,
.line-bottom-box {
  width: 100%;
  height: 100%;
  position: relative;
  .header {
    position: absolute;
    width: 100%;
    padding: vw(5);
    z-index: 9;
    display: flex;
    justify-content: space-between;
    .title {
      color: white;
      font-size: vw(20);
    }
    .tool {
      cursor: pointer;
      color: white;
      font-size: vw(20);
    }
  }
}
</style>

